<template>
	<view class="outer_box">
		<view class="background-fist">
			<view class="qrbg">
				<image class="qr" :src="'data:image/png;base64,'+src2"></image>
			</view>
			<button class="share" data-name="shareBtn" open-type="share">发送我的邀请
				<!-- <image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/member/fenxiang.png" mode=""></image> -->
			</button>

		</view>
		<view class="background-second">
			<view class="flow-box">
				<view class="flow">
					<view class="flow-1">
						<view class="">1</view>
						<view class="">推荐好友</view>
					</view>
					<view class="flow-2">
						<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/member/jiantou.png" mode=""></image>
					</view>
					<view class="flow-1">
						<view class="">2</view>
						<view class="">好友注册并成为会员</view>
					</view>
					<view class="flow-2">
						<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/member/jiantou.png" mode=""></image>
					</view>
					<view class="flow-1">
						<view class="">3</view>
						<view class="">赠送1次陪伴门诊服务</view>
					</view>
				</view>

			</view>
			<view class="record-box">
				<view class="record">
					<view class="title">
						<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/member/biaoti.png" mode=""></image>
					</view>
					<view class="record-person">

						<scroll-view scroll-y="true" :style="{height:height+'px'}">
							<view class="" v-if='recode==0'>
								<view class="no-record">
									<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/member/jilu.png" mode=""></image>
									<view class="">暂时还没有邀请记录</view>
								</view>
							</view>
							<view class="person-box" v-else>
								<view class="person" v-for="(item,index) in inviterecode" :key="index">
									<view class="">
										<image :src="item.image" mode=""></image>
									</view>
									<view class="">
										{{item.nickName}}
									</view>
									<view class="" v-if="item.flag==true">
										已成为会员
									</view>
									<view class="" v-if="item.flag==false">
										未开通会员
									</view>
								</view>
							</view>
						</scroll-view>


					</view>

				</view>

			</view>

		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	export default {
		data() {
			return {
				inviterecode: '',
				height: 300,
				recode:1,  //记录是0条和非0条
				src2:'',
				qr:'',
			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					// this.height = res.windowHeight - uni.upx2px(120)
				}
			})
		},
		computed: mapState(['userInfo','loginState']),
		onShow() {
			uni.$on("carData", (rel) => {
				carData = rel
				if (carData == 1) { //登录页面返回
					this.bindrecommend()
				}
			})
			if(this.loginState){
				this.getQRcode()
				this.getrecommendedrecord()
				this.getAccessToken()
			 }
			
		},
		 onLoad (query) {
			 if(this.loginState){
				  // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
				const scene = decodeURIComponent(query.scene)
				console.log('扫码结果='+scene)
				this.qr = scene
				if (scene!=="undefined") {
					this.bindrecommend()
					}
			 }else{
				 uni.navigateTo({
				 	url:'../login/login'
				 })
			 }
		  },
		  onShareAppMessage(res) {
		  		    if (res.from === 'button') {// 来自页面内分享按钮
		  		      console.log(res.target)
		  		    }
		  		    return {
		  		      title: '相伴会员中心',
		  		      path: '/pages/index/index'
		  		    }
		},
		methods: {
			//绑定推荐用户
			bindrecommend(){
				this.$api_http.bindrecommenduser({
					cipherText:this.qr
				}).then((res) => {
					if (res.data.success) {
						console.log(res.data.dataMap)
						this.getrecommendedrecord()
							uni.showToast({
								title: "绑定成功",
								duration: 1000,
							});
						
					}else{
						uni.showToast({
							title:res.data.message,
							duration:1000
						})
					}
				})
			},
			// getcode(access_token){
			// 	this.$api_common.getwxacodeunlimit({
			// 		access_token:access_token,
			// 		scene:this.qr
			// 	}).then((res) => {
			// 		if (res.data.code == 200) {
			// 			this.src2 = wx.arrayBufferToBase64(res.data.dataMap);
			// 		}
			// 	})
			// },
			getcode(access_token){
			    var that=this;
			    var scene=this.qr;//拼接你要添加的参数
			    wx.request({
			      url: 'https://weixin.xiangban365.com/wxa/getwxacodeunlimit?access_token=' + access_token,
			      data: {
			        scene: scene,
			        page: 'pages/member/recommend',//线上的小程序一定要有这个页面
			      },
			      method:'POST',
			      responseType: 'arraybuffer',
			      success:(res)=>{
					  console.log(res)
			        this.src2 = wx.arrayBufferToBase64(res.data);  //对数据进行转换


			      }
			    })
			  },
			  share1(){
				  uni.share({
				      provider: "weixin",
				      scene: "WXSceneSession",
				      type: 1,
				      imageUrl: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",
				      success: function (res) {
				          console.log("success:" + JSON.stringify(res));
				      },
				      fail: function (err) {
				          console.log("fail:" + JSON.stringify(err));
				      }
				  });
			  },
			//获取access_token
			getAccessToken(){
				this.$api_common.getAccessToken({
					accessId:'W1rM29P3AISsoVkCvx7fOvQer'
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.getcode(res.data.dataMap.access_token)
					}
				})
			},
			getrecommendedrecord(){
				this.$api_http.getrecommendedrecord({}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap.list)
						if(res.data.dataMap.list.length==0){
							this.recode = 0
						}else{
							this.recode = 1
							this.inviterecode = res.data.dataMap.list
						}
					}
				})
			},
			async make() {
				// 回调方式
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: this.qr,
					size: 200,
					margin: 0,
					backgroundColor: '#f8f8f8',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						console.log(res)
					}
				})
			},
			//二维码生成
			getQRcode(){
				this.$api_http.getQRcode({}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.qr = res.data.dataMap
						console.log(this.qr)
					}
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	.qrbg{
		width: 400rpx;
		height: 400rpx;
		margin-top: 300rpx;
		border-radius: 20px;
		background-color: #FFE89C;
		position: relative;
		.qr{
			position: absolute;
			left: 30rpx;
			top: 30rpx;
			width:340rpx;
			height:340rpx;
			// margin-top: 300rpx;
		}
	}
	.outer_box {
		.background-second {
			width: 100%;
			background: #FF803A;
			display: flex;
			flex-direction: column;
			padding-bottom: 50rpx;

			.record-box {
				padding: 0 30rpx;

				.record {
					width: 690rpx;
					height: 758rpx;
					background: #FFE89B;
					border-radius: 12rpx;
					margin-top: 30rpx;

					.title {
						display: flex;
						justify-content: center;
						padding: 30rpx 0;

						image {
							width: 241rpx;
							height: 60rpx;
						}
					}

					.record-person {
						display: flex;
						flex-direction: column;
						margin: 0 auto;
						width: 92%;
						height: 608rpx;
						background: #FFFFFF;
						border-radius: 10rpx;

						// justify-content: center;
						// align-items: center;
						.person-box {
							padding: 20rpx;

							.person {
								display: flex;
								align-items: center;

								view:nth-child(1) {
									flex: 1;
								}

								view:nth-child(2) {
									flex: 2;
									color: #333333;
									font-size: 32rpx;
								}

								view:nth-child(3) {
									flex: 3;
									font-size: 24rpx;
									font-weight: 500;
									color: #FF8308;
									text-align: end;
								}

								image {
									width: 80rpx;
									height: 80rpx;
									border-radius: 50%;
								}
							}
						}

						.no-record {
							padding-top: 100rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;

							view:nth-child(2) {
								margin: 0 auto;
								font-size: 20rpx;
								font-weight: 400;
								color: #999999;
							}

							image:nth-child(1) {
								margin: 0 auto;
								width: 324rpx;
								height: 313rpx;
							}
						}

					}


				}
			}

			.flow-box {
				padding: 0 30rpx;

				.flow {
					display: flex;
					background: #FFFFFF;
					border-radius: 12rpx;
					padding: 0 50rpx;

					.flow-1 {
						flex: 3;
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 30rpx 0;

						view:nth-child(1) {
							width: 50rpx;
							height: 50rpx;
							background: #FFBD66;
							border-radius: 50%;
							font-size: 28rpx;
							color: #fff;
							text-align: center;
							line-height: 50rpx;
						}

						view:nth-child(2) {
							margin-top: 20rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: #FF8308;
							text-align: center;
							letter-spacing: 2px
						}
					}

					.flow-2 {
						flex: 1;
						display: flex;
						justify-content: center;
						padding: 30rpx 0;

						image {
							margin-top: 15rpx;
							width: 28rpx;
							height: 24rpx;
						}
					}
				}
			}
		}

		.background-fist {
			background-image: url(https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/member/bg2.png);
			width: 100%;
			height: 940rpx;
			background-size: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			button{
				margin-top: 40rpx;
				color: #FF8308;
				width: 440rpx;
				height: 88rpx;
				background: linear-gradient(180deg, #FFE8A6, #FDC249);
				box-shadow: 0rpx 5rpx 24rpx 0rpx rgba(167, 7, 46, 0.45);
				border-radius: 44rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 36rpx;
				font-weight: 500;
				// border: none !important; 
				// border-radius: 40rpx;
				// outline: none !important;
				// background: url(https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/member/fenxiang.png) no-repeat 100% 100%;
				// background-size: cover;
			}
			

		}

	}
</style>
